<template>
    <div>
        <el-upload :action="url"
                   :show-file-list="false"
                   accept=".avi,.wmv,.mpg,.mpeg,.mov,.rm,.ram,.swf,.flv,.mp4"
                   :on-success="uploadSuccess"
                   :on-error="uploadError"
                   :on-change="change"
                   :data = "params"
        >

            <div class="up_box" :style="{width:size_c,height:size_c}">
                <video :width="size" :height="size" controls v-if="value_c" :src="value_c">
<!--                    <source :src="value_c">-->
                    您的浏览器不支持 video 属性。
                </video>
                <el-icon v-else class="up_icon">
                    <span class="fa fa-upload"></span>
                </el-icon>
            </div>


            <template #tip>
                <el-alert v-if="data.error!=''" :title="data.error" type="error" :closable="false"/>
            </template>

        </el-upload>

<!--        <div>-->
<!--            <mi-input v-model="value_c" placeholder="使用外部视频地址"/>-->
<!--        </div>-->
    </div>



</template>

<script setup lang="ts">
import {computed, reactive} from "vue";

const props = withDefaults(defineProps<{
    modelValue?:string,
    size?: string | number,
    url?: string,
    params?: any,   // 暂时没用到
}>(),{
    size: 200,
    url:import.meta.env.VITE_APP_UPLOAD_IMG_URL,
})

const emits = defineEmits(['update:modelValue', 'onChange'])

const data = reactive({
    error: ''
})

const value_c = computed({
    get: () => {
        return props.modelValue
    },
    set: (val) => {
        emits("update:modelValue", val)
    }
})

const size_c = computed(() => {
    if (typeof props.size == "string"){
        return props.size
    }else{
        return String(props.size) + 'px'
    }
})

const uploadSuccess = (res: any) => {

    if (res.error == 0) {
        value_c.value = res.url
        data.error = ''    // 清空错误信息
    } else {
        data.error = res.msg
    }
}

const uploadError = (res:any) => {
    data.error = "上传失败"
}

const change = (file:any, fileList:any) => {
    emits("onChange", file, fileList)
}


</script>

<style scoped>
.up_box {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--el-text-color-secondary);
}

.up_box:hover {
    border-color: var(--el-color-primary);
    color: var(--el-color-primary);
}

.up_img {
    width: 100%;
    height: 100%;
}

.up_icon {
    width: 50%;
    height: 50%;
}
</style>
